<template>
  <div>
    <el-row :gutter="20">
      <el-col span="8">
        <div ref="pieChart1" class="chart-container"></div>
        <div style="text-align:center;font-weight: 600;font-size: 18px">总收入</div>
      </el-col>
      <el-col span="8">
        <div ref="pieChart2" class="chart-container"></div>
        <div style="text-align:center;font-weight: 600;font-size: 18px">总支出</div>
      </el-col>
      <el-col span="8">
        <div ref="pieChart3" class="chart-container"></div>
        <div style="text-align:center;font-weight: 600;font-size: 18px">总债务</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getCountList } from "@/api/login";
import * as echarts from 'echarts';

export default {
  mounted() {
    // this.renderPieCharts(); 
    this.getCountBiList();

  },

  methods: {
    renderPieCharts() {
      this.renderPieChart('pieChart1', ['Label 1', 'Label 2', 'Label 3'], [300, 50, 100]);
      this.renderPieChart('pieChart2', ['Label A', 'Label B', 'Label C'], [200, 150, 80]);
      this.renderPieChart('pieChart3', ['Apple', 'Banana', 'Orange'], [120, 180, 90]);
    },
    async getCountBiList() {
      getCountList().then(res => {
        if (res.data?.length) {
          res.data.forEach((e, index) => {
            this.renderPieChart('pieChart' + (index + 1), e.roleList, e.moneyList);
          })
        }

      });
    },
    renderPieChart(ref, labels, data) {
      console.log(echarts);
      const chart = echarts.init(this.$refs[ref]);

      chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        series: [
          {
            name: name,
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: labels.map((label, index) => ({
              value: data[index],
              name: label,
            })),
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 300px;
  height: 300px;
  margin: 20px auto 0;
}
</style>
